<template>
  <div class="bar-chart-test">
    <h2>柱状图组件测试</h2>
    <div class="chart-wrapper">
      <MiniBarChart :chartData="testData" height="400px" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MiniBarChart from '@/components/chart/MiniBarChart.vue'

// 测试数据
const testData = ref({
  date: ['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'],
  data1: [1200, 1500, 800, 2000, 1800, 1300, 1600], // 买入金额
  data2: [900, 1200, 600, 1500, 1400, 1000, 1100]   // 卖出金额
})
</script>

<style scoped>
.bar-chart-test {
  padding: 20px;
}

.chart-wrapper {
  margin-top: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

h2 {
  color: #333;
  margin-bottom: 20px;
}
</style>